<template>
  <view class="pay-way-page" v-if="showPopup">
    <view class="page-bg" @click="handleCancle"></view>
    <view class="page-content">
      <view class="page-header">{{$t('facePay.toUse')}}</view>
      <view class="content-body">
        <view @click="gotoUse">
          <image :src="asyncImgs.images.online_use_icon" />
          <text>{{$t('facePay.online')}}</text>
        </view>
        <view @click="guideShop">
          <image :src="asyncImgs.images.guide_shop_icon" />
          <text>{{$t('shop.toShop')}}</text>
        </view>
      </view>

      <view class="confirm-section" @click="handleCancle">{{$t('person.cancle')}} </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    showPopup: {
      type: Boolean,
      default: true,
    },
    couponItem: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },

  computed: {},
  methods: {
    handleCancle() {
      this.$emit("handleCancle");
    },
    gotoUse() {
      // 打开另一个小程序
      uni.navigateToMiniProgram({
        appId: "",
        path: "pages/index/index?id=123",
        extraData: {},
        success(res) {
          // 打开成功
        },
      });
    },
    // 导航到店
    guideShop(e) {
      // 点击导航按钮
      if (e.latitude && e.latitude != "" && e.longitude && e.longitude != "") {
        uni.openLocation({
          latitude: parseFloat(e.latitude),
          longitude: parseFloat(e.longitude),
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-way-page {
  width: 100%;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;

  .page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #3d3d3d;
    opacity: 0.75;
  }

  .page-content {
    width: 100%;
    border-radius: 22rpx 22rpx 0 0;
    background: #f2f2f2;
    position: absolute;
    bottom: 0;

    .page-header {
      text-align: center;
      padding: 34rpx 0;
      font-size: 32rpx;
      font-weight: 500;
      color: #191919;
      line-height: 1;
    }

    .content-body {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40rpx 0 50rpx 0;
      view {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191919;
        line-height: 1;
        margin: 0 98rpx;

        image {
          width: 96rpx;
          height: 96rpx;
          display: block;
          margin-bottom: 22rpx;
          background-color: #eeeeee;
        }
      }
    }

    .confirm-section {
      width: 100%;
      background: #ffffff;
      box-shadow: 0 1rpx 0 0 #f2f2f2;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 30rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #ffffff;
      font-weight: 500;
      color: #191919;
    }
  }
}
</style>
